<template>
	<!-- 封装输入组件 -->
	<div class="text_group">
		<!-- 组件结构：（input输入框+button按钮）+（错误提醒） = div + div = 2*div -->
		<div class="input_group border border-r p-3 d-flex jc-between flex-row">
			<!-- input输入框，接收Login.vue传递的数据 -->
			<!-- type,alue,placeholder,name,emit注册事件-->
			<input
				class="h-100 w-60"
			  :type="type"
        :value="value"
        :placeholder="placeholder"
        :name="name"
				@input="$emit('input',$event.target.value)"
			>
			<!-- 输入框右边的按钮button,接收Login.vue传递的数据 -->
			<!-- btnTitle标题,disabled禁用,error错误,emit注册事件 -->
			<button
				v-if="btnTitle"
				:disabled="disabled"
				@click="$emit('btnClick')"
			>
				{{btnTitle}}
			</button>
		</div>
		<!-- 错误提醒 -->
		<!-- error -->
		<div
			v-if="error"
			class="invalid-feedback text-red pt-1"
		>
			{{error}}	
		</div>
	</div>
</template>

<script>
export default {
	name:"InputGroup",
	props:{
		type:{
			type: String,
			default: 'text'
		},
		value: String,
    placeholder: String,
    name: String,
    btnTitle: String,
    disabled: Boolean,
    error: String
	}
}
</script>

<style lang='scss' scoped>
@import '../assets/scss/_variables.scss';

.input_group button[disabled] {
  color: map-get($colors,'grey');
}
</style>